<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
</head>
<body>
<div id="app">
  <input type="text" v-model="inputValue"/>
  <button v-on:click="handleBtnClick">提交</button>
  <ul>
      <!--创建的组件-->
      <todo-item v-bind:content="item"
                 v-for="item in list">

      </todo-item>
      <!--父组件向子组件传值  通过v-bind  然后一个变量（content)的形式  把item-->
      <!--值传给todo-item子组件-->
  </ul>
</div>
<script>
    //创建全局组件的使用
//   Vue.component("TodoItem",{
//       props:['content'],
//     //TodoItem要接受父组件todo-item（两个组件的表达形式）的内容
//     //使用props来接收数据
//       template:"<li>{{content}}</li>"    //子组件的模板
//   });
   //创建局部组件的使用
    var TodoItem={
      props:['content'],
      template:"<li>{{content}}</li>"
    };
    var app=new Vue({
      el:'#app',
      data:{
        list:[],
        inputValue:''
      },
      components:{          //使用局部组件时添加的components
        TodoItem:TodoItem
      },
      methods:{
        handleBtnClick:function(){
          this.list.push(this.inputValue);
          this.inputValue='';
//          alert(this.inputValue)
        }
      }
    })
</script>
</body>
</html>
